import React, { FC, useReducer } from 'react'
type Event = React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>


// 每条解读的
interface IanalysisItem {
  code: number
  min: number
  max: number
  content: string
  [propName: string]: string | number //为了list[index][e.target.name] = e.target.value
}

// 每个因子的
interface IFactorItem {
  factorid: number
  name: string
  show: number
  evaluation_criteria: number
  demarcation_score: number
  analysis: IanalysisItem[]
  [propName: string]: string | number | IanalysisItem[] //为了list[index][e.target.name] = e.target.value
}

// listReducer的action
interface IAction {
  type: string
  payload: {
    name?: string
    value?: string
    index: number
    i?: number
  }
}

// props
interface IIndexProps {
  index: number
}

const list: IFactorItem[] = [
  {
    factorid: 2718974317,
    name: '因子1',
    show: 1,
    evaluation_criteria: 1,
    demarcation_score: 60,
    analysis: [{ code: 1212, min: 20, max: 30, content: '和欧俄劈腿业务1' },
      { code: 12121, min: 30, max: 40, content: '和欧俄劈腿业务2' }]
  },
  {
    factorid: 271897431789,
    name: '因子2',
    show: 0,
    evaluation_criteria: 0,
    demarcation_score: 60,
    analysis: [{ code: 122, min: 20, max: 30, content: '和欧俄1' },
      { code: 121, min: 30, max: 40, content: 'ewr务2' }]
  }
]

function listReducer(state: { list: IFactorItem[] }, action: IAction) {
  const { name = '', value = '', index, i = 0 } = action.payload
  const list = [...state.list]
  switch (action.type) {
  case 'factor':
    list[index][name] = value
    return { list }
  case 'analysis':
    list[index].analysis[i][name] = value
    return { list }
  case 'addAnalysis':
    list[index].analysis.push({ code: Math.random() * 1000, min: 0, max: 0, content: '' })
    return { list }
  default:
    throw new Error()
  }
}

// 解读
const Analysis: FC<IIndexProps> = (props: IIndexProps) => {
  const [state, dispatch] = useReducer(listReducer, { list })
  const analysisList = state.list[props.index].analysis

  // 解读input改变的时候
  const analysisDispatch = (e: Event, type: string, i: number) => {
    const payload = {
      name: e.target.name,
      value: e.target.value,
      index: props.index,
      i
    }
    dispatch({ type, payload })
  }

  // 新增一条解读
  const addAnalysisDispatch = (type: string) => {
    const payload = {
      index: props.index
    }
    dispatch({ type, payload })
  }

  return (<>
    <li>解读：</li>
    {
      analysisList.map((val, i) => {
        return <li key={val.code}>
          <p>当（得分-划界分）在</p>
          <input type='input' name='min' value={val.min} onChange={(e) => analysisDispatch(e, 'analysis', i)} />～
          <input type='input' name='max' value={val.max} onChange={(e) => analysisDispatch(e, 'analysis', i)} />
          <p>之间，则显示</p>
          <textarea rows={3} cols={20} name='content' value={val.content} onChange={(e) => analysisDispatch(e, 'analysis', i)} />
        </li>
      })
    }
    <button onClick={() => addAnalysisDispatch('addAnalysis')}>新增一条解读</button>
  </>)
}

// 因子的
const Factor: FC<IIndexProps> = (props: IIndexProps) => {
  const [state, dispatch] = useReducer(listReducer, { list })
  const factor = state.list[props.index]
  // 因子input改变的时候
  const factorDispatch = (e: Event, type: string) => {
    const payload = {
      name: e.target.name,
      value: e.target.value,
      index: props.index
    }
    dispatch({ type, payload })
  }
  return (
    <ul>
      <h2>{factor.name}</h2>
      <li>
        <input type='checkbox' name='show' value={factor.show} onChange={(e) => factorDispatch(e, 'factor')} />在结果中显示
      </li>
      <li>
        <input type='radio' name='evaluation_criteria' value={factor.evaluation_criteria} onChange={(e) => factorDispatch(e, 'factor')} />越高越好
        <input type='radio' name='evaluation_criteria' value={factor.evaluation_criteria} onChange={(e) => factorDispatch(e, 'factor')} />越低越好
      </li>
      <li>
        <p>总分划界分（满分：100）</p>
        <input type='input' name='demarcation_score' value={factor.demarcation_score} onChange={(e) => factorDispatch(e, 'factor')} />
      </li>
      <Analysis index={props.index} />
    </ul>
  )
}

// 总的
const Plan1: FC = () => {
  const [state] = useReducer(listReducer, { list })
  // 提交
  const submit = (): void => {
    console.log('submit', state.list)
  }
  return (
    <div>
      {
        state.list.map((item, index) => {
          return <Factor key={item.factorid} index={index} />
        })
      }
      <button onClick={submit} >提交</button>
    </div>
  )
}

export default Plan1